<template>
	<!-- 个人中心页面 -->
	<view style="padding-top: 44px;">
		<!-- 登录注册按钮 -->
		<view class="btn" v-show="isShow">
			<u-button type="primary" @click="changeModal">登录</u-button>
			<u-button @click="toRegister">注册</u-button>
		</view>

		<!-- 提示 -->
		<view style="width: 42%; margin: 0 auto;padding-top: 200rpx;" v-show="isShow">
			<text style="font-size: 35rps; font-weight: bold; color: #2979ff;">登录以后体验感更好哦！</text>
		</view>

		<!-- 忘记密码 -->
		<view class="loseMima" v-show="isShow">
			<text @click="toForgetPassword">忘记密码?</text>
			<u-line color="info" margin="0 20rpx" :hair-line="false" direction="col" length="40rpx" />
			<text style="color:#2979ff ;" @click="toContact">联系我们</text>
		</view>

		<!-- 信息栏展示 -->
		<view v-show="!isShow">
			<view class="user">
				<view class="user-avatar">
					<u-avatar size="large" :src="userInfo.user_img"></u-avatar>
				</view>
				<view class="user-name">
					<text class="one">昵称：{{userInfo.user_name}}</text>
					<text class="two">ID：{{userInfo.user_id}}</text>
				</view>
			</view>
			<view class="setting">
				<view v-for="(item,index) in list" :key="index" class="setting-item" @click="toOther(item.path)">
					<view class="setting-item-left">
						<u-icon :name="item.icon"></u-icon>
						<text>{{item.name}}</text>
					</view>
					<view class="setting-item-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 退出按钮 -->
		<view v-show="!isShow" class="deleteBtn">
			<u-button type="error" @click="logoutShow = true">退出</u-button>
		</view>

		<!-- 登录模态框 -->
		<u-modal ref="loginModal" :negative-top="transHeight" v-model="show" title="登录" show-cancel-button
			:title-style="{color:'#2979ff'}" @confirm='userLogon' :async-close="true">
			<view class="forms">
				<u-form :model="form" ref="uForm" label-width="120">
					<u-form-item label="账号">
						<u-input v-model="form.userName" maxlength="12" placeholder="请输入账号" trim />
					</u-form-item>
					<u-form-item label="密码">
						<u-input type="password" maxlength="15" placeholder="请输入密码" password-icon
							v-model="form.password" trim />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>

		<u-modal ref="logoutModal" v-model="logoutShow" content="是否确定退出!!!!!!" show-cancel-button
			:title-style="{color: 'red'}" @confirm='deleteUser'></u-modal>

		<!-- 验证模态框 -->
		<!-- <u-modal ref="yanzhenModal" :negative-top="transHeight2" v-model="YZshow" show-cancel-button @confirm="yanzhen" :async-close="true">
			<view class="loseForm">
				<u-form :model="YZform" ref="YZForm" label-width="100">
					<u-form-item label="邮箱" prop="qq_email">
						<u-input v-model="YZform.qq_email" maxlength="20" trim placeholder="请输入邮箱"/>
					</u-form-item>
					<u-form-item label="验证码" prop="captcha">
						<u-input v-model="YZform.captcha" maxlength="6" trim placeholder="请输入验证码"/>
						<u-button size="mini" @tap="getCode" type="primary">{{tips}}</u-button>
					</u-form-item>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
					</u-verification-code>
				</u-form>
			</view>
		</u-modal> -->

		<u-toast ref="uToast" />
		<Tabbar></Tabbar>
	</view>
</template>

<script>
	import {
		userLogin,
		getUserInfo,
		userLogout,
		getCaptcha,
		yanzhengEmail
	} from '../../utils/user.js'
	export default {
		data() {
			return {
				//验证模态框的显示
				YZshow: false,
				YZform: {
					qq_email: '',
					captcha: ''
				},
				seconds: 60,
				tips: '',
				isShow: false,
				//控制登录模态框显示隐藏
				show: false,
				//用户的登录信息
				form: {
					userName: '',
					password: ''
				},
				//保存来用来判断用户是否登录
				userInfo: '',
				//保存来用来判断用户是否登录
				token: '',
				//模态框移动高度
				transHeight: '',
				transHeight2:'',
				//用户可操作的东西
				list: [{
						name: '个人信息',
						icon: 'setting',
						path: '/subpkg/xinXi/xinXi'
					},
					{
						name: '修改密码',
						icon: 'lock',
						path: '/subpkg/password/password'
					},
					{
						name: '我的点赞',
						icon: 'thumb-up',
						path: '/subpkg/like/like'
					},
					{
						name: '我的收藏',
						icon: 'bookmark',
						path: '/subpkg/collection/collection'
					},
					{
						name: '我的足迹',
						icon: 'eye',
						path: '/subpkg/foot/foot'
					},
					{
						name: '我的评论',
						icon: 'chat',
						path: '/subpkg/comment/comment'
					},
					{
						name: '联系我们',
						icon: 'email',
						path: '/subpkg/contact/contact'
					}
				],
				//用户退出模态框
				logoutShow: false
			};
		},
		methods: {
			//用户登录
			async userLogon() {			
				let data = {
					name: this.form.userName,
					pwd: this.form.password
				}
				let result = await userLogin(data)
				if (result.code === 200) {
					uni.setStorageSync('token', result.data1.token)
					uni.setStorageSync('userInfo', result.data1.USERINFO)
					this.token = uni.getStorageSync('token')
					this.userInfo = uni.getStorageSync('userInfo')
					this.panduan()
					this.show = false
					this.$refs.uToast.show({
						title: '登录成功',
						type: 'success',
						duration: 1000
					})
					this.form.userName = ''
					this.form.password = ''
					// setTimeout(() => {
					// 	this.panduan()
					// },1000)					
				} else if (result.code === 500) {
					setTimeout(() => {
						this.$refs.loginModal.clearLoading();
						this.$refs.uToast.show({
							title: '账号或密码错误',
							type: 'error',
							duration: 1000
						})
					}, 500)
				} else if (result.code === 505) {
					setTimeout(() => {
						this.$refs.loginModal.clearLoading();
						this.$refs.uToast.show({
							title: '账号已登录！！！',
							type: 'error',
							duration: 1000
						})
					}, 500)
				}else if(result.code === 515){
					setTimeout(() => {
						this.$refs.loginModal.clearLoading();
						this.$refs.uToast.show({
							title: '您的账号已被封禁，请联系开发者',
							type: 'error',
							duration: 1000
						})
					}, 500)
				}else {
					this.$refs.loginModal.clearLoading();
					this.$refs.uToast.show({
						title: '出现了不知名错误',
						type: 'error',
						duration: 1000
					})
				}
			},
			//判断用户是否登录
			panduan() {
				if (this.token === '') {
					this.isShow = true
				} else {
					this.isShow = false
				}
			},
			//用户退出登录
			async deleteUser() {
				let result = await userLogout(this.userInfo.user_id)
				if (result.code === 200) {
					uni.removeStorageSync('token')
					uni.removeStorageSync('userInfo')
					this.token = ''
					this.$refs.uToast.show({
						title: '退出登录',
						type: 'warning',
						duration: 1000
					})
					this.panduan()
				} else {
					this.$refs.logoutModal.clearLoading();
					this.$refs.uToast.show({
						title: '出现了不知名错误',
						type: 'error',
						duration: 1000
					})
				}
			},
			//模态框显示并让他向上移动
			changeModal() {
				this.show = true;
				uni.onKeyboardHeightChange(res => {
					this.transHeight = `${res.height}rpx`
				})
			},
			//验证模态框并向上移动
			YZModal(){
				this.YZshow = true
				uni.onKeyboardHeightChange(res => {
					this.transHeight2 = `${res.height}rpx`
				})
			},
			//去注册页面
			toRegister() {
				uni.navigateTo({
					url: '/subpkg/register/register'
				})
			},
			//去联系我们页面
			toContact(){
				uni.navigateTo({
					url:'/subpkg/contact/contact'
				})
			},
			//去其他操作界面
			toOther(path) {
				uni.navigateTo({
					url: path
				})
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			codeChange(text) {
				this.tips = text;
			},
			codeChange(text) {
				this.tips = text;
			},
			//发送验证码
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(async () => {																												
						let result = await getCaptcha(this.YZform.qq_email)
						uni.hideLoading();
						if(result.code === 200){
							// 这里此提示会被this.start()方法中的提示覆盖		
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}else if(result.code === 515){							
							this.$refs.uToast.show({
								title: '您的账号已被封禁，请联系开发者',
								type: 'error',
								duration: 1000
							})
						}else{
							this.$refs.uToast.show({
								title: '出现了不知名错误',
								type: 'error',
								duration: 1000
							})
						}
					}, 500);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//跳转去忘记密码
			toForgetPassword() {
				uni.navigateTo({
					url:`/subpkg/forgetPassword/forgetPassword?type=2`
				})
			}
		},
		// onReady() {
		// 	this.$nextTick(() => {
		// 		this.$refs.YZForm.setRules(this.rules);
		// 	})
		// },
		onLoad() {
			// this.panduan()
			
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.userInfo = uni.getStorageSync('userInfo')
			this.panduan()
		}
		// components:{
		// 	Tabbar
		// }
	}
</script>

<style lang="scss" scoped>
	.btn {
		padding-top: 400rpx;
		width: 50%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.forms {
		width: 90%;
		margin: 0 auto;
	}

	.loseMima {
		padding-top: 350rpx;
		width: 50%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}

	.loseForm {
		width: 90%;
		margin: 0 auto;
	}

	.user {
		padding: 60rpx 0;
		width: 80%;
		margin: 0 auto;
		display: flex;

		.user-avatar {
			width: 40%;
			display: flex;
			justify-content: center;
		}

		.user-name {
			width: 60%;
			display: flex;
			flex-direction: column;
			justify-content: center;


			.one {
				font-size: 40rpx;
				font-weight: bold;
			}

			.two {
				font-size: 24rpx;
			}
		}
	}

	.setting {
		width: 85%;
		margin: 0 auto;
		padding-top: 30rpx;

		.setting-item {
			display: flex;
			justify-content: space-between;
			padding-bottom: 55rpx;
			font-size: 40rpx;
		}
	}

	.deleteBtn {
		padding-top: 70rpx;
		width: 40%;
		margin: 0 auto;
	}
</style>
